<template>
	<view class="page-main" :key="refreshKey">
		<!-- <view class="row-title">
			<text style="color: #FF4A4A;">*</text>
			<text>原始登录密码</text>
		</view>
		<input class="my-input animate__fadeInUp" v-model="oldPwd" type="password" placeholder="请输入您的原始登录密码" style="animation-duration: 2s;"> -->
		<view class="row-title">
			<text style="color: #FF4A4A;">*</text>
			<text>新的登录密码</text>
		</view>
		<view class="animate__fadeInUp" style="border-radius: 24rpx;overflow:hidden;background:#FCFCFC;animation-duration: 2s;">
			<input class="my-input" style="border-radius: 0;" v-model="newPwd" type="password" placeholder="请输入新的登录密码">
			<view style="height: 1rpx;width: 650rpx;background:#FCFCFC;margin-left: 28rpx;"></view>
			<input class="my-input" style="border-radius: 0;" v-model="confirmPwd" type="password" placeholder="请再次输入新的登录密码">
		</view>
		<view class="row-title">
			<text style="color: #FF4A4A;">*</text>
			<text>密钥</text>
		</view>
		<input class="my-input animate__fadeInUp" type="text" v-model="secretKey"  placeholder="请输入您的密钥" style="animation-duration: 2s;">
		<view class="btn" @click="modifyPwd">确认修改登录密码</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPwd: '',
				newPwd: '',
				confirmPwd: '',
				secretKey: '',
				refreshKey:0
			}
		},
		onLoad() {
			this.getCaptcha();
		},
		onShow(){
			this.refreshKey += 1;
		},
		methods: {

			getCaptcha() {
				var that = this;
				uni.$uv.http.get('/getCaptcha').then(res => {
					that.uuid = res.data.uuid;
					that.captchaImg = res.data.captchaImg;
				});
			},

			// 获取验证码
			getCode(e) {
				// console.log(e)
				this.securityCode = '重新获取了'
			},
			logout() {
				var that = this;
				uni.$uv.http.post('/logout').then(res => {
					try {
						uni.removeStorageSync('tokenName');
					} catch (e) {}
					uni.reLaunch({
						url: "../login/login"
					});
				});
			},

			modifyPwd: function() {
				var that = this;
				// if (that.oldPwd == null || that.oldPwd == '') {
				// 	uni.showToast({
				// 		title: "请输入原密码",
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				if (that.newPwd == null || that.newPwd == '') {
					uni.showToast({
						title: "请输入新密码",
						icon: "none"
					});
					return;
				}
				if (that.confirmPwd == null || that.confirmPwd == '') {
					uni.showToast({
						title: "请再输入新密码",
						icon: "none"
					});
					return;
				}
				if (that.newPwd != that.confirmPwd) {
					uni.showToast({
						title: "密码不一致",
						icon: "none"
					});
					return;
				}
				// var passwordPatt = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,32}$/
				// if (!passwordPatt.test(that.newPwd)) {
				// 	uni.showToast({
				// 		title: "8-32位;必须包含大小写英文、数字。",
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				if (that.secretKey == null || that.secretKey == '') {
					uni.showToast({
						title: "请输入密钥",
						icon: "none"
					});
					return;
				}
				uni.$uv.http.post('/member/modifyLoginPwd', {
					//oldPwd: that.oldPwd,
					newPwd: that.newPwd,
					secretKey: that.secretKey,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								that.logout();
							}, 2000);
						}
					});
				});
			},
		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background: url('/static/img/my_bg.png') no-repeat;
	background-size: 100% 100%;
	background-color: #FFFFFF;
}
	.page-main{
		width: 100vw;
		height: 100vh;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		overflow-y: hidden;
	}

	.row-title{
		font-size: 32rpx;
		color: #000;
		margin-bottom: 20rpx;
		margin-top: 40rpx;
	}

	.my-input{
		height: 108rpx;
		padding: 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #000;
		line-height: 108rpx;
        background: #FFF;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.btn{
		position: fixed;
		bottom: 126rpx;
		width: 670rpx;
		text-align: center;
        height: 100rpx;
		line-height: 100rpx;
        background: #FEE19E;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        font-size: 32rpx;
        color: #0B1327;
	}
</style>